<template>
  <div class="supplier-order-check" id="supplierOrderCheck">
    <createTop firstMenu="配料采购" secondMenu="采购订单" title="采购订单详情"></createTop>
        
    <el-button
    size="small"
    plain
    type="info"
    class="daochu-btn2"
    v-if="status==='已入库'||status==='部分入库'"
    @click="chakanruku">查看入库记录</el-button>
        
    <el-button
    size="small"
    plain
    type="info"
    class="daochu-btn"
    @click="$getPdf('#supplierOrderCheck','配料采购')">导出PDF</el-button>

    <el-card class="one">
        <el-button
        v-if="status==='待下单'"
        size="mini"
        plain
        type="success"
        class="xiadan"
        @click="confirm">确认下单</el-button>

      <div class="check-title">
        <div class="status" :class="status==='已作废'?'zuofei-color':''">{{status}}</div>
        <div class="top">
          <div class="i"><span>采购单号: </span>{{iRes.order}}</div>
          <div class="i"><span>采购员: </span>{{iRes.purchase_name}}</div>
          <div class="i"><span>日期: </span>{{iRes.date}}</div>
          <div class="i"><span>制单人: </span>{{iRes.make_username}}</div>
          <div class="i"><span>预计到货时间: </span>{{iRes.yuji_date}}</div>
        </div>
      </div>
        <el-table
        :data="tableData"
        style="width: 100%"
        :border="true"
        :fit="true"
        :stripe="true"
        show-summary
        size="mini"
        align="center">

        <el-table-column
          prop="materials_number"
          label="配料编号"
          min-width="110"
          align="center">
        </el-table-column>

        <el-table-column
          prop="materials_name"
          label="配料名称"
          min-width="120"
          align="center">
        </el-table-column>

        <el-table-column
          prop="formats_name"
          label="规格/型号"
          min-width="120"
          align="center">
        </el-table-column>

        <el-table-column
          prop="materials_unit"
          label="单位"
          min-width="90"
          align="center">
        </el-table-column>

        <el-table-column
          prop="purchase_count"
          label="采购数"
          min-width="120"
          align="center">
        </el-table-column>

        <el-table-column
          prop="suppliers_nickname"
          label="供应商"
          min-width="120"
          align="center">
        </el-table-column>

        <el-table-column
          prop="suppliers_price"
          label="采购单价"
          min-width="120"
          align="center">
        </el-table-column>

        <el-table-column
          prop="xiaoji_price"
          label="小计"
          min-width="120"
          align="center">
          <template slot-scope="scope">
            <div>{{scope.row.xiaoji_price.toFixed(3)}}</div>
          </template>
        </el-table-column>

      </el-table>
      <div class="otherPrice">
        其他费用 : {{iRes.other_price?iRes.other_price:'0.00'}}
      </div>

      <div class="allPrice">
        应付金额 :<span class="red-word"> {{iRes.all_price}}</span>
      </div>
    </el-card>

    <el-card v-if="iRes.remarks">
      <div class="bottom">
        <div class="remark"><span>备注:</span>{{iRes.remarks}}</div>

      </div>
    </el-card>

    <!-- <el-button
    v-if="status==='已入库'"
    size="small"
    plain
    type="info"
    class="daochu-btn"
    @click="downLoad">导出</el-button> -->

    <el-button
    v-if="status==='待入库'||status==='部分入库'"
    size="small"
    plain
    type="success"
    class="daochu2-btn"
    @click="$to('supplierToStroke',{id:id})">入库</el-button>

  </div>
</template>
<script lang="ts">
import Vue from 'vue';
import Component from 'vue-class-component';
import createTop from '@/components/createTop.vue';
import saveBtn from '@/components/saveBtn.vue';
import ajaxResquest from '@/api/apiRequest';
import { Watch } from 'vue-property-decorator';
import AjaxResquest from '@/api/apiRequest';

@Component({
  components: {
    createTop
  }
})
export default class OrderStatusCheck extends Vue {
  listRes!: AjaxResquest;
  confirmRes!: AjaxResquest;
  zuofeiRes!: AjaxResquest;

  tableData: any[] = [];
  iRes = {};
  status: string = '';
  id!: string;

  $baseUrl!: any;
  $router!: any;
  // 商品分类
  mounted() {
    // TODO
    console.log(this.$route.query);
    this.status = this.$route.query.status;
    this.id = this.$route.query.id;
    this.listRes = new AjaxResquest('/purchase/purchaseInfo');
    this.confirmRes = new AjaxResquest('/order/orderVerifyToDo');
    this.getList();
  }
  getList(): void {
    this.listRes
      .getFunction({ purchaseInfoId: this.$route.query.id })
      .then((res: any) => {
        if (res.data.code === 1) {
          let temp = res.data.data.types.list;
          temp.map((i: any) => {
            if (i.remarks === null) {
              return (i.remarks = '');
            }
          });
          console.log(temp);

          this.tableData = temp;
          this.iRes = res.data.data.types.info;
        }
      });
  }
  chakanruku() {
    this.$to('accessIn', { search: this.$route.query.id });
  }
  downLoad() {
    console.dir(Window);
    let a = document.createElement('a');
    a.href = `${
      this.$baseUrl
    }/auxiliaryparts/auxiliaryStockListExport?Authorization=${
      sessionStorage.token
    }`;
    a.target = '_blank';
    a.click();
  }
  confirm() {
    this.confirmRes
      .getFunction({ orderInfoId: this.$route.query.id })
      .then((res: any) => {
        if (res.data.code === 1) {
          this.$to('order');
        }
      });
  }
  rukujilu() {}
}
</script>
<style lang="less">
.supplier-order-check {
  position: relative;
  height: 100%;
  padding: 15px;
  // display: flex;
  flex-direction: column;
  // z-index: 101;
  box-sizing: border-box;
  text-align: left;
  .el-card {
    overflow-y: auto;
  }
  .status {
    font-size: 24px;
    color: red;
  }
  .check-title {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    margin-bottom: 15px;
  }
  .el-checkbox {
    margin: 2px 0 !important;
    width: 130px;
  }
  .radio {
    margin-top: 10px;
  }
  .top {
    display: flex;
    padding-left: 40px;
    // margin-bottom: 10px;
    div {
      min-width: 140px;
      margin-right: 20px;
    }
    span {
      font-weight: 600;
    }
  }
  .bottom {
    // display: flex;
    padding-left: 20px;
    // margin-top: 10px;
    margin-top: 15px;
    div {
      min-width: 140px;
      margin-right: 20px;
      margin-bottom: 20px;
    }
    span {
      display: inline-block;
      margin-right: 15px;
      font-weight: 600;
    }
    .date {
      font-weight: 500;
      font-size: 14px;
      color: #777;
    }
  }
  .one {
    position: relative;
    margin-bottom: 15px;
  }
  .xiadan {
    position: absolute;
    right: 35px;
    top: 15px;
  }
  .big-word {
    font-weight: 600;
  }
  .otherPrice {
    margin-top: 10px;
    width: 100%;
    justify-content: flex-end;
    display: flex;
    align-items: center;
    font-size: 14px;
  }
  .allPrice {
    margin-top: 10px;
    width: 100%;
    justify-content: flex-end;
    display: flex;
    align-items: center;
    font-size: 16px;
    .red-word {
      color: red;
    }
  }
  .xiadan-btn {
    margin-top: 15px;
  }
  .zuofei-btn {
    position: absolute;
    right: 160px;
    top: 15px;
  }
  .zuofei-dia {
    z-index: 300000;
    .el-dialog {
      z-index: 2025;
    }
  }
  .daochu2-btn {
    position: absolute;
    right: 180px;
    top: 15px;
  }
  .daochu-btn2 {
    position: absolute;
    right: 250px;
    top: 15px;
  }
  .zuofei-color {
    color: blue;
  }
}
</style>
